<template>
  <el-dialog
    :title="!dataForm.Id ? '新增模型' : '修改模型'"
    :close-on-click-modal="false"
    width="40%"
    :visible.sync="visible"
  >
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="80px">
      <el-row>
        <el-col>
          <el-form-item size="mini" label="流程名称" prop="Name">
            <el-input v-model="dataForm.Name" maxlength="25" show-word-limit placeholder="请输入流程名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item size="mini" label="流程代码" prop="Code">
            <el-input v-model="dataForm.Code" :readonle="dataForm.Id > 0" maxlength="25" show-word-limit placeholder="请输入流程代码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item size="mini" label="所属租户" prop="Tenant">
            <el-select
              v-model="dataForm.Tenant"
              default-first-option
              filterable
              remote
              reserve-keyword
              style="width: 100%"
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in options"
                :key="item.Code"
                :label="item.Name"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="text-align: right;">
          <el-button size="mini" icon="el-icon-close" @click="visible = false">取消</el-button>
          <el-button size="mini" icon="el-icon-check" type="primary" @click="dataFormSubmit()">确定</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import { fetchAll } from '@/api/tenant'
import { getProcessModel, saveProcessModel, updateProcessModel } from '@/api/workflowmodel'
export default {
  data() {
    return {
      tenantList: [],
      options: [],
      loading: false,
      dataForm: {
        Id: 0,
        Name: '',
        Code: '',
        Tenant: ''
      },
      dataRule: {
        Name: [
          { required: true, message: '模型名称不能为空', trigger: 'blur' }
        ],
        Code: [
          { required: true, message: '模型代码不能为空', trigger: 'blur' }
        ],
        Tenant: [{
          required: true, message: '所属租户不能为空', trigger: 'blur'
        }]
      },
      visible: false
    }
  },
  methods: {
    init(id, tenant) {
      this.visible = true
      this.dataForm.Id = id || 0
      fetchAll().then((data) => {
        if (data && data.code === '20000') {
          const result = data.data
          this.tenantList = result
          this.options = this.tenantList
          this.$refs['dataForm'].resetFields()
          this.dataForm.Tenant = tenant
        }
      }).then(() => {
        if (id && id > 0) {
          getProcessModel(id).then((data) => {
            if (data && data.code === '20000') {
              this.dataForm.Id = data.position.Id
              this.dataForm.Code = data.position.Code
              this.dataForm.Name = data.position.Name
              this.dataForm.Tenant = data.position.Tenant
            }
          })
        }
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.tenantList.filter(item => {
            return item.Name.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
              item.Code.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = this.tenantList
      }
    },
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          var data = {
            'Id': this.dataForm.Id || undefined,
            'Code': this.dataForm.Code,
            'Name': this.dataForm.Name,
            'Tenant': this.dataForm.Tenant
          }
          var permission
          if (this.dataForm.Id && this.dataForm.Id > 0) {
            permission = updateProcessModel(data)
          } else {
            permission = saveProcessModel(data)
          }
          permission.then((data) => {
            if (data && data.code === '20000') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
